<template>
    <a-card :title="t(props.title)" style="width: 300px" size="small" class="c-card" v-motion-slide-right>
        <template #extra><span class="more" @click="toRouter(moreURL)">{{ t('sidebar.more') }}</span></template>
        <div class="c-list" v-for="(item, index) in props.cardList" :key="index">
            <div class="c-tips">
                <img :src="item.cover" alt="" @click="toRouter(item.url)">
                <span class="c-nick" @click="toRouter(item.url)">{{ item.name }}</span>
            </div>
            <div class="c-count">{{ item.count }}篇</div>
        </div>
    </a-card>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
const router = useRouter();
const { t } = useI18n()
const props = defineProps({
    moreURL: {
        type: String,
        required: true
    },
    title: {
        type: String,
        required: true
    },
    cardList: {
        type: Array,
        required: true
    }
})
const toRouter = (url) => {
    router.push({path: url})
} 
</script>

<style lang="scss" scoped>
.c-card {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    .more {
        color: $font-color-primary;
        cursor: pointer;
    }
    .c-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;

        .c-tips {
            img {
                width: 40px;
                height: 40px;
                border-radius: 6px;
                margin-right: 10px;
                cursor: pointer;
            }

            .c-nick {
                color: $font-color-primary;
                cursor: pointer;
            }
        }

        .c-count {
            font-size: 14px;
            color: rgb(155, 155, 155);
        }
    }
}
</style>